<section class="container" [ngClass]="formStatus">
  <header>Registration Form</header>

  <form class="form" [formGroup]="reactiveForm" (ngSubmit)="OnFormSubmitted()">
    <div class="column">
      <div class="input-box">
        <input type="text" placeholder="First Name" formControlName="firstname" />
        <small *ngIf="reactiveForm.get('firstname').errors?.['required'] && reactiveForm.get('firstname').touched">
          *First Name is a required field.
        </small>
        <small *ngIf="reactiveForm.get('firstname').errors?.['noSpaceAllowed'] && reactiveForm.get('firstname').touched">
          *No Space is allowed for First Name.
        </small>
      </div> 

      <div class="input-box">
        <input type="text" placeholder="Last Name" formControlName="lastname" />
        <small *ngIf="reactiveForm.get('lastname').invalid && reactiveForm.get('lastname').touched">
          *Last Name is a required field.
        </small>
      </div>
    </div>    

    <div class="input-box">
      <input type="text" placeholder="Email" formControlName="email" />
      <small *ngIf="reactiveForm.get('email').invalid && reactiveForm.get('email').touched">
        *Entered Email is not valid.
      </small>
    </div>

    <div class="column">
      <div class="input-box">
        <input type="text" placeholder="username" formControlName="username" />
        <button class="btn-gen-username" type="button" (click)="GenerateUsername()"
          [disabled]="!(reactiveForm.get('firstname').value 
                        && reactiveForm.get('lastname').value 
                        && reactiveForm.get('dob').value)"
        >
          Create a Username
        </button>
      </div>
      <div class="input-box">
        <input type="date" placeholder="Date of Birth" formControlName="dob" />
      </div>
    </div>

    

    <div class="gender-box">
      <h3>Gender</h3>
      <div class="gender-option">
        <div class="gender">
          <input type="radio" value="male" id="check-male" formControlName="gender" />
          <label for="check-male">Male</label>
        </div>
        <div class="gender">
          <input type="radio" value="female" id="check-female" formControlName="gender" />
          <label for="check-female">Female</label>
        </div>
        <div class="gender">
          <input type="radio" value="other" id="check-other" formControlName="gender" />
          <label for="check-other">Prefer not to say</label>
        </div>
      </div>
    </div>

    <div class="input-box address" formGroupName="address">
      <label>Address</label>
      <input type="text" placeholder="Street address" formControlName="street"/>
      <small *ngIf="reactiveForm.get('address.street').invalid && reactiveForm.get('address.street').touched">
        *Street address is a required field.
      </small>
      <div class="column">
        <div class="select-box">
          <select name="country" formControlName="country">
            <option hidden>Country</option>
            <option>America</option>
            <option>Japan</option>
            <option>India</option>
            <option>Nepal</option>
          </select>
          <small *ngIf="reactiveForm.get('address.country').invalid && reactiveForm.get('address.country').touched">
            *Country is a required field.
          </small>
        </div>
        <input type="text" placeholder="City" formControlName="city"/>
      </div>
      <div class="column">
        <input type="text" placeholder="Region" formControlName="region" />
        <input type="number" placeholder="Postal code" formControlName="postal" />
        <small *ngIf="reactiveForm.get('address.postal').invalid && reactiveForm.get('address.postal').touched">
          *Street address is a required field.
        </small>
      </div>
    </div>
    <div class="input-box skills" formArrayName="skills">
      <h4>Add Skills</h4>
      <div class="column" *ngFor="let control of reactiveForm.get('skills')['controls']; let i =index">
        <input type="text" 
          placeholder="Add Skill..."
          [formControlName]="i">
        <button type="button" class="btn-add-delete" (click)="DeleteSkill(i)">
          Delete
        </button>
      </div>
      
    </div>
    <button type="button" class="btn-add-delete" (click)="AddSkills()">
      Add Skills
    </button>

    <div class="input-box" formArrayName="experience">
      <div class="experience" *ngFor="let exp of reactiveForm.get('experience')['controls']; let i = index" [formGroupName]="i">
        <label>Experience {{i + 1}}</label>
        <input type="text" placeholder="Company Name" formControlName="company" />
        <div class="column">
          <div class="select-box">
            <select formControlName="position">
              <option hidden>Position</option>
              <option>Junior Developer</option>
              <option>Software Developer</option>
              <option>Senior Developer</option>
              <option>Team Lead</option>
            </select>
          </div>
          <input type="number" placeholder="Experience" formControlName="totalExp"/>
        </div>
        <div class="column">
          <input type="date" placeholder="Start Date" formControlName="start" />
          <input type="date" placeholder="End Date" formControlName="end" />
        </div>
        <button type="button" class="btn-add-delete" (click)="DeleteExperience(i)">
          Delete Experience
        </button>
      </div>
    </div>
    <button type="button" class="btn-add-delete" (click)="AddExperience()">
      Add Experience
    </button>

    <input type="submit" value="Submit" class="submit-btn"> 
    <!-- [disabled]="!reactiveForm.valid" -->
  </form>
</section>


<section class="user-detail-container">
  <div class="user-details-container">
    <div class="user-avatar">
      <p>{{formdata.firstname?.slice(0, 1)}}{{formdata.lastname?.slice(0, 1)}}</p>
    </div>
    <div class="user-details">
      <div class="user-name">
        <h2>{{formdata.firstname}} {{formdata.lastname}}</h2>
      </div>
      <p><b>Email:</b> {{formdata.email}}</p>
      <p><b>Username:</b> {{formdata.username}} </p>
      <p><b>Date of birth:</b> {{formdata.dob}}</p>
      <div class="user-name">
        <h3>Address</h3>
      </div>
      <span>{{formdata.address?.country}}</span>.
      <span> {{formdata.address?.city}}</span>.
      <span> {{formdata.address?.region}}</span>.
      <span> {{formdata.address?.postal}}</span>
    </div>
  </div>
</section>